<template>
    <page-body>
        <view class="page">
            <view class="flex flex-direction flex-wrap align-stretch justify-center benben-position-layout flex feedBack_flex_0" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex flex-wrap align-stretch justify-between feedBack_fd0_0'>
                    <view class='flex flex-wrap align-center feedBack_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                        <text class='fu-iconfont2  feedBack_fd0_0_c0_c0'>&#xe794;</text>
                    </view>
                    <view class='flex flex-wrap align-center'>
                        <text class='feedBack_fd0_0_c1_c0'>我要反馈</text>
                    </view>
                    <view class='flex align-center justify-end feedBack_fd0_0_c2'>
                    </view>
                </view>

            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---意见反馈表单flex布局开始-->
            <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
                <view class='flex flex-direction align-stretch feedBack_fd1_0'>
                    <view class='flex flex-wrap align-center feedBack_fd1_0_c0'>
                        <text class='feedBack_fd1_0_c0_c0'>反馈类型</text>
                    </view>
                    <view class='flex flex-direction flex-wrap align-stretch feedBack_fd1_0_c1'>
                        <benben-select-diy ref="showSelectPopup1689675271268" class-name='flex flex-wrap align-center flex' :items.sync="dataList" 
						v-model="changeId" default-type="title" default-label="title" :allow-cancel='false' type="radio" :disabled='false'>
                            <template v-for='(item,key0) in dataList'>
                                <view v-if="item.isSelected" class='flex align-center justify-center flex feedBack_fd1_0_c1_c0_c0' :key="key0" @tap="$refs.showSelectPopup1689675271268.tapHandle(key0)">
                                    <text class='flex-sub feedBack_fd1_0_c1_c0_c0_c0'>{{item.title}}</text>
                                </view>
                                <view v-else class='flex align-center justify-center flex feedBack_fd1_0_c1_c0_c1' :key="key0" @tap="$refs.showSelectPopup1689675271268.tapHandle(key0)">
                                    <text class='flex-sub feedBack_fd1_0_c1_c0_c1_c0'>{{item.title}}</text>
                                </view>
                            </template>
                        </benben-select-diy>
                    </view>
                    <view class='flex flex-wrap align-center feedBack_fd1_0_c2'>
                    </view>
                    <text class='feedBack_fd1_0_c3'>问题描述</text>
                    <view class='flex flex-direction flex-wrap align-stretch feedBack_fd1_0_c4'>
                        <view class='flex flex-wrap feedBack_fd1_0_c4_c0'>
                            <textarea class='flex feedBack_input_fd1_0_c4_c0' confirm-type="done" :placeholder="'问题描述的越详细，有助于我们更快的解决问题'" 
							:maxlength="-1" :show-num='true' placeholder-style="color:#999;font-size:28rpx" v-model="body" />
                            <!-- <template>
                                <view class='flex flex justify-end feedBack_numberfd1_0_c4_c0_c0'>
                                    <text>{{body.length}}</text>
                                    <text>/</text>
                                    <text>300</text>
                                </view>
                            </template> -->
                        </view>
                    </view>
                    <view class='flex flex-direction flex-wrap align-stretch feedBack_fd1_0_c4'>
                        <benben-images-upload ref="benbenImagesUploadfd1_0_c5_c0" :img-list.sync="img" :img-ids.sync="img_id" :is-show-tips='true' :maxlength="6">
                            <template #content="{ num, maxlength, isShow, imgList }">
                                <view class="flex flex-wrap align-start flex feedBack_fd1_0_c5_c0">

                                    <view v-for="(image, index) in img" :key="index" class='flex position-relative feedBack_fd1_0_c5_c00'>
                                        <text class='fu-iconfont2 position-absolute feedBack_fd1_0_c5_c000' @tap.stop="$refs.benbenImagesUploadfd1_0_c5_c0.delImage(index)">&#xE8E7;</text>
                                        <image class='feedBack_fd1_0_c5_c001' @tap.stop="$refs.benbenImagesUploadfd1_0_c5_c0.previewImage(index)" 
										mode="aspectFill" :src='image'></image>
                                    </view>

                                    <image class='feedBack_fd1_0_c5_c01' @tap.stop="$refs.benbenImagesUploadfd1_0_c5_c0.manyChooseImage()" v-if="img.length < 6" mode="aspectFit" :src='STATIC_URL+"147.png"'></image>
                                    <text class='image_upload_tips feedBack_fd1_0_c5_c02'>请上传应用截图，最多上传{{maxlength}}张</text> 
                                </view>
                            </template>
                        </benben-images-upload>
                    </view>
                </view>
                <view class='flex flex-wrap align-center feedBack_fd1_0_c2'>
                </view>
                <text class='feedBack_fd1_2'>请留下您的联系方式</text>
                <view class='flex flex-wrap align-center feedBack_fd1_3'>
                    <benben-input class='flex-sub feedBack_fd1_3_c0' type="text" :placeholder="`手机号/邮箱/QQ号`" confirm-type="done" :maxlength="-1" :adjust-position='true' placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="lianxi" />
                </view>
            </view>

            <!---意见反馈表单flex布局结束-->
            <view class="flex flex-direction flex-wrap align-center benben-position-layout flex feedBack_flex_2">
                <button class='feedBack_fd2_0' @tap.stop="postfeedbackFunc()">提交</button>
                <text class='feedBack_fd2_1'  @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/userSet/feedBackDetail/feedBackDetail`">历史反馈</text>

            </view>
            <view :style="{height: '240rpx'}"></view>


        </view>
    </page-body>
</template>
<script>
    import {
        validate
    } from '@/common/utils/validate.js'

    export default {
        components: {},


        data() {
            return {
                "changeId": "",
                "changeType": [{
                    "name": "下载/加载问题",
                    "value": "1",
                    "image": ""
                }, {
                    "name": "会员付费问题",
                    "value": "2",
                    "image": ""
                }, {
                    "name": "章节/图片问题",
                    "value": "3",
                    "image": ""
                }, {
                    "name": "APP体验问题",
                    "value": "4",
                    "image": ""
                }, {
                    "name": "卡顿/不流畅",
                    "value": "5",
                    "image": ""
                }, {
                    "name": "其他",
                    "value": "6",
                    "image": ""
                }],
                "dataList": [],
                "body": "",
                "img": [],
                "img_id": "",
                "lianxi": ""
            };
        },
        computed: {

        },
        watch: {},
        onLoad(options) {
            this.getTypeFunc()
        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {

        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
            //提交反馈
            async postfeedbackFunc() {
                if (!validate(this.changeId, 'require')) {
                    this.$message.info('请选择反馈类型');
                    return false;
                }
                if (!validate(this.body, 'require')) {
                    this.$message.info('请输入问题描述');
                    return false;
                }
                // if (!validate(this.lianxi, 'require')) {
                //     this.$message.info('请填写联系方式');
                //     return false;
                // }
                //请求方法
                //数据验证
				// console.log(this.changeId,111111111111)
				// return
                let data64746727ef480 = await this.$api.dbPost(global.apiUrls.post636dc0bcb5991, {
                    body: this.body,
                    thumb: this.img,
                    type: this.changeId,
                    contact: this.lianxi
                });
                if (!data64746727ef480) return
                if (data64746727ef480.data.code != 1) {
                    this.$message.info(data64746727ef480.data.msg);
                    return
                }
                let info64746727ef480 = data64746727ef480.data;
				this.$urouter.navigateBack(1);


            },
            //获取反馈类型
            async getTypeFunc() {
                //请求方法
                //数据验证

                let datadataList = await this.$api.get(global.apiUrls.post6474666547c45, {

                });

                if (datadataList.data.code != 1) {
                    this.$message.info(datadataList.data.msg);
                    return
                }
                let infodataList = datadataList.data;
                this.dataList = infodataList.data

                this.changeId = this.dataList[0].title //默认类型id
            }
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: var(--benbenbgColor1);
        background-size: 100% auto;
    }

    .feedBack_flex_0 {
        border-bottom: 1px solid #eee;
        background: #fff;
        width: 750rpx;
        height: 88rpx;
        overflow: hidden;
        z-index: 10;
        top: 0rpx;
        background-size: 100% auto !important;
    }

    .feedBack_fd0_0_c2 {
        padding: 0rpx 0rpx 0rpx 0rpx;
        width: 200rpx;
    }

    .feedBack_fd0_0_c1_c0 {
        font-size: 36rpx;
        font-weight: 500;
        color: var(--benbenFontColor0);
        line-height: 50rpx;
    }

    .feedBack_fd0_0_c0_c0 {
        font-size: 36rpx;
        font-weight: 400;
        color: #333;
    }

    .feedBack_fd0_0_c0 {
        width: 200rpx;
    }

    .feedBack_fd0_0 {
        padding: 0rpx 32rpx 0rpx 32rpx;
        line-height: 88rpx;
    }

    .feedBack_fd1_3_c0 {
        font-size: 28rpx;
        font-weight: 400;
        color: #333;
    }

    .feedBack_fd1_3 {
        border-bottom: 1px solid #eee;
        padding: 32rpx 0rpx 24rpx 0rpx;
        margin: 0rpx 32rpx 0rpx 32rpx;
    }

    .feedBack_fd1_2 {
        color: #1A1A1A;
        font-size: 32rpx;
        font-weight: 500;
        line-height: 45rpx;
        text-align: left;
        font-style: normal;
        margin: 40rpx 32rpx 0rpx 32rpx;
    }

    .feedBack_fd1_0_c5_c02 {
        font-size: 24rpx;
        color: var(--benbenFontColor2);
        font-weight: 400;
        width: 100%;
    }

    .feedBack_fd1_0_c5_c01 {
        width: 160rpx;
        height: 160rpx;
        margin: 0rpx 24rpx 24rpx 0rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
    }

    .feedBack_fd1_0_c5_c001 {
        width: 160rpx;
        height: 160rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
    }

    .feedBack_fd1_0_c5_c000 {
        top: 0rpx;
        right: 0rpx;
        z-index: 10;
        color: #ff5536;
    }

    .feedBack_fd1_0_c5_c00 {
        margin: 0rpx 24rpx 24rpx 0rpx;
    }

    .feedBack_fd1_0_c5_c0 {
        padding: 24rpx 0rpx 0rpx 24rpx;
    }

    .feedBack_numberfd1_0_c4_c0_c0 {
        width: 100%;
        font-size: 24rpx;
        color: rgba(153, 153, 153, 1);
        line-height: 46rpx;
        font-weight: 400;
    }

    .feedBack_input_fd1_0_c4_c0 {
        width: 100%;
        height: 166rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: var(--benbenFontColor0);
    }

    .feedBack_fd1_0_c4_c0 {
        width: 686rpx;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        margin: 0rpx 0rpx 0rpx 32rpx;
        padding: 0rpx 0rpx 24rpx 0rpx;
    }

    .feedBack_fd1_0_c4 {
        margin: 0rpx 0rpx 32rpx 0rpx;
    }

    .feedBack_fd1_0_c3 {
        font-size: 32rpx;
        font-weight: 500;
        color: var(--benbenFontColor0);
        line-height: 109rpx;
        margin: 0rpx 32rpx 0rpx 32rpx;
    }

    .feedBack_fd1_0_c2 {
        background: rgba(246, 247, 249, 1);
        height: 20rpx;
        background-size: 100% auto;
    }

    .feedBack_fd1_0_c1_c0_c1_c0 {
        font-size: 28rpx;
        font-weight: 400;
        color: var(--benbenFontColor0);
        line-height: 62rpx;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-align: center;
    }

    .feedBack_fd1_0_c1_c0_c1 {
        border: 1px solid rgba(191, 191, 191, 1);
        background: var(--benbenbgColor1);
        margin: 16rpx 16rpx 16rpx 16rpx;
        height: 64rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        width: 206rpx;
        padding: 0rpx 10rpx 0rpx 10rpx;
    }

    .feedBack_fd1_0_c1_c0_c0_c0 {
        font-size: 28rpx;
        font-weight: 400;
        color: var(--benbenFontColor3);
        line-height: 62rpx;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-align: center;
    }

    .feedBack_fd1_0_c1_c0_c0 {
        background: #FF8E21;
        margin: 16rpx 16rpx 16rpx 16rpx;
        height: 64rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        width: 206rpx;
        padding: 0rpx 10rpx 0rpx 10rpx;
    }

    .feedBack_fd1_0_c1 {
        padding: 0rpx 16rpx 16rpx 16rpx;
    }

    .feedBack_fd1_0_c0_c0 {
        font-size: 32rpx;
        font-weight: 500;
        color: var(--benbenFontColor0);
        margin: 0rpx 32rpx 0rpx 32rpx;
    }

    .feedBack_fd1_0_c0 {
        padding: 32rpx 0rpx 12rpx 0rpx;
    }

    .feedBack_fd1_0 {
        background: var(--benbenbgColor1);
        background-size: 100% auto !important;
    }

    .feedBack_flex_2 {
        width: 750rpx;
        height: 219rpx;
        overflow: hidden;
        z-index: 10;
        bottom: calc(0rpx + var(--window-bottom));
		background: #fff;
    }

    .feedBack_fd2_1 {
        color: #777777;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 40rpx;
        margin: 32rpx 0rpx 0rpx 0rpx;
    }

    .feedBack_fd2_0 {
        background: #FF8E21;
        border-radius: 50rpx 50rpx 50rpx 50rpx;
        font-size: 32rpx;
        color: var(--benbenFontColor3);
        height: 80rpx;
        width: 686rpx;
        margin: 0rpx 32rpx 0rpx 32rpx;
        line-height: 80rpx;
    }
</style>